<template>
	<view :data-theme="theme" style="display: flex;flex-direction: column; height: 100%;">
		<!-- 去往品类 -->
		<view class="middle">
			<button :color="bgColor" class="plain_bgColor"
				style="font-weight: bold;border-radius: 16rpx;color: #FFF;padding: 20rpx;" @click="goSortePage(1)">+
				添加品类</button>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="scrollHandle" style="flex: 1; min-height: 10px;">
			<!-- 已加品类 -->
			<view v-if="tableData.length>0" class="card" v-for="(item,index) in tableData" :key="index">
				<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
					<view style="color: #000;font-size: 15px;font-weight: bold;">{{item.parentName}}/{{item.name}}
					</view>
					<span type="text" @click="deleteCata(item,index)">删除</span>
				</view>
				<!-- 选填内容 -->
				<view style="background-color: #f5f5f5;border-radius: 10px;">
					<u--form labelPosition="left" :model="model1" ref="form1">
						<view style="display: flex;font-size: 16px;margin: 20rpx;justify-content: space-between;align-items: center;"
							@click="openGroup(item,index)">
							<view style="flex: 1;margin:20rpx 0;">
								供应层级
							</view>
							<view style="flex: 2;">
								<view style="justify-content: space-between;display: flex;margin: 20rpx;">
									<view style="flex: 2;">
										{{radiovalue[index]}}
									</view>
									<u-icon name="arrow-right" color="#666" size="16"></u-icon>
								</view>
							</view>
						</view>
						<view style="display: flex;margin: 0 10px;font-size: 16px;justify-content: center;align-items: center;">
							<view style="flex: 1;">
								品牌
							</view>
							<view style="flex: 2;">
								<view
									style="display: flex;justify-content: space-between;font-size: 16px;margin: 20rpx;"
									@click="goBrand(index,1)">

									<view style="flex: 2;">
										{{brandValue[index] ? brandValue[index] : ' '}}
									</view>
									<u-icon name="arrow-right" color="#666" size="16"></u-icon>
								</view>
							</view>
						</view>

						<!-- </u-form-item> -->
						<u-form-item label="可经营商品数量" labelWidth="width:100px;" style="padding: 0 15px;" ref="item1">
							<u--input v-model="item.manageShopCount" type="number" border="none" placeholder="请输入"
								style="margin-left: 20px;"></u--input>
						</u-form-item>
						<u-form-item label="单日最大供货量" labelWidth="width:100px;" style="margin: 0 15px;">
							<view
								style="display: flex;justify-content: center;text-align: center;flex-direction: row;line-height: 44px;align-items: center;">
								<input v-model="item.dayCount" type="number" placeholder="输入数量"
									style="margin-left: 20px;flex: 1;display: flex;" border="none"></input>
								<span style="flex: 1;display: flex;text-align: center;justify-content: center;">|</span>
								
								<view class="item-expanded"
									style="display: flex;flex: 2;justify-content: space-between;"
									@click="openGroupUnits(item,index)">
									<view>
										{{item.units ? item.units : ''}}
									</view>
									<u-icon name="arrow-right" color="#666" size="16"></u-icon>
								</view>
							</view>

						</u-form-item>
					</u--form>
				</view>
			</view>

			

			<!-- 新增加的区域 -->
			<view class="card" v-for="(item,index1) in modifiedArray" :key="item.id">
				<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
					<view style="color: #000;font-size: 15px;font-weight: bold;">{{item.parentName}}/{{item.name}}
					</view>
					<span type="text" @click="delateDate(index1)">删除</span>
				</view>
				<!-- 选填内容 -->
				<view style="background-color: #f5f5f5;border-radius: 10px;">
					<u--form labelPosition="left">
						<view v-if="addCheckboxValue != ''"
							style="display: flex;font-size: 16px;margin:20rpx;justify-content: space-between;"
							@click="addGroup(index1)">
							<view style="flex: 1;margin: 20rpx 0;">
								供应层级
							</view>
							<view style="flex: 2;display: flex;margin: 20rpx;" @click="addGroup(index1)">
								<view style="flex: 2;">
									{{addCheckboxValue[index1]}}
								</view>
								<u-icon name="arrow-right" color="#666" size="16"></u-icon>
							</view>
						</view>
						
						<view v-else style="display: flex;font-size: 16px;margin:20rpx;justify-content: space-between;"
							@click="addGroup(index1)">
							<view style="flex: 1;margin: 20rpx 0;">
								供应层级
							</view>
							<view style="flex: 2;display: flex;margin: 20rpx;" @click="addGroup(index1)">
								<view style="flex: 2;">
									请选择
								</view>
								<u-icon name="arrow-right" color="#666" size="16"></u-icon>
							</view>
						</view>
						
						<view style="display: flex;margin: 0 10px;font-size: 16px;">
							<view style="flex: 1;">
								品牌
							</view>
							<view style="flex: 2;">
								<view
									style="display: flex;justify-content: space-between;font-size: 16px;margin: 20rpx;"
									@click="goBrand(index1,2)">
									<view style="flex: 2;">
										{{brandValue2[index1] ? brandValue2[index1] : ' '}}
									</view>
									<u-icon name="arrow-right" color="#666" size="16"></u-icon>
								</view>
							</view>
						</view>
						<u-form-item label="可经营商品数量" labelWidth="width:100px;" style="padding: 0 15px;">
							<u--input v-model="item.manageShopCount" type="number" border="none" placeholder="请输入"
								style="margin-left: 20px;"></u--input>
						</u-form-item>
						<u-form-item label="单日最大供货量" labelWidth="width:100px;" style="padding: 0 15px;">
							<view
								style="display: flex;flex-direction: row;justify-content: center;text-align: center;line-height: 88rpx;align-items: center;">
								<input v-model="item.dayCount" type="number" placeholder="输入数量"
									style="margin-left: 20px;flex: 1;" border="none"></input>
								<span style="flex: 1;display: flex;text-align: center;justify-content: center;">|</span>
								
								<view class="item-expanded"
									style="display: flex;flex: 2;justify-content: space-between;"
									@click="openGroupUnits2(item,index1)">
									<view>
										{{item.units ? item.units : ''}}
									</view>
									<u-icon name="arrow-right" color="#666" size="16"></u-icon>
								</view>
							</view>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</scroll-view>
		
		<view class='noCommodity' v-if="tableData.length == 0 && modifiedArray.length == 0">
			<view class='pictrue'>
				<image src='./static/noSearch.png'></image>
			</view>
			<text class="text-ccc" style="font-size: 30rpx;color: #999;">暂无信息</text>
		</view>
		
		<!-- 选择层级区域 -->
		<view>
			<tui-drawer mode="bottom" :visible="showGroup" @close="close">
				<view class="u-demo-block">
					<text class="u-demo-block__title">供应层级</text>
					<view class="u-page_checkbox-item">
						<radio-group v-model="radiovalue[innterIndex]" @change="groupChange">
							<label style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(subName, index0) in checkboxList" :key="subName.id">
								<view>
									<radio :value="subName.name" />
								</view>
								<view style="line-height: 19px;">{{subName.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</tui-drawer>
		</view>
		<!-- 选择单位名称 -->
		<view>
			<tui-drawer mode="bottom" :visible="showGroupUnit" @close="close">
				<view class="u-demo-block2">
					<text class="u-demo-block__title">选择售卖单位</text>
					<view style="margin: 10px 0 10px 0">
						<view class="sku-select1">
							<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
								<view class="flex-text"
									:class='item.name == attrValue[innterIndexUnits]? "right-class-active" :""'
									v-for="(item,index) in unitList" :key="index" @click='tapAttr(item)'>
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</tui-drawer>
		</view>
		<!-- 新增选择供应层级 -->
		<view>
			<tui-drawer mode="bottom" :visible="showGroup2" @close="close">
				<view class="u-demo-block">
					<text class="u-demo-block__title">供应层级</text>
					<view class="u-page_checkbox-item">
						<radio-group v-model="radiovalue[innterIndex2]" @change="addgroupChange">
							<label style="display: flex;flex-direction: row;margin: 20rpx;border-bottom: 1px solid #eee;padding: 20rpx 0;"
								v-for="(item, index) in checkboxList" :key="index">
								<view>
									<radio :value="item.name" />
								</view>
								<view style="line-height: 19px;">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</tui-drawer>
		</view>
		<!-- 新增选择单位名称 -->
		<view>
			<tui-drawer mode="bottom" :visible="showGroupUnit2" @close="close">
				<view class="u-demo-block2">
					<text class="u-demo-block__title">选择售卖单位</text>
					<view style="margin: 10px 0 10px 0">
						<view class="sku-select1">
							<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
								<view class="flex-text"
									:class='item.name == attrValue2[innterIndexUnits2]? "right-class-active" :""'
									v-for="(item,index) in unitList" :key="item.id" @click='tapAttr2(item)'>
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</tui-drawer>
		</view>

		<view style="position: sticky;bottom: 0px;width: 100%;padding: 10px;background-color: #fff;">
			<view v-if="!queryAuditData.data.length">
				<view>
					<button class="bg_color" style="font-weight: bold;border-radius: 16rpx;color: #FFF;padding: 20rpx;"
						:color="bgColor" @click="addManageCategory">提交审核</button>
				</view>
			</view>
			<view v-else class="footer" style="display: flex;">
				<view class="footer-left" style="flex: 1;">
					<button class="bg_color" style="font-weight: bold;border-radius: 16rpx;color: #FFF;padding: 20rpx;"
						:color="bgColor">审核中</button>
				</view>
				<view class="footer-right" style="flex: 1;margin-left: 10rpx;">
					<button class="bg_color" style="font-weight: bold;border-radius: 16rpx;color: #FFF;padding: 20rpx;"
						:color="bgColor" @click="goQueryAudit">查看</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import {
		selectManageInfoApi,
		manageCategoryAuditApi,
		brandlistApi,
		businessQueryAuditApi
	} from '@/api/category.js';
	import {
		setThemeColor
	} from '../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				brandForm: {
					current: 1,
					size: 10,
				}, //品牌查询
				brandData: [], //品牌的数据
				brandValue: [], //回显的品牌名字
				brandValue2: [], //添加的品牌的名字
				tableForm: {
					page: 1,
					limit: 10,
				},
				tableData: [], //data数据
				oldTableData: [],
				moreStatus: 'more',
				showGroup: false,
				showGroup2: false, //增加的供应层级选择弹窗
				showGroupUnit: false, // 单位弹窗
				showGroupUnit2: false, //增加的，单位弹窗
				innterIndex: '',
				innterIndex2: '', //增加的索引
				innterIndexUnits: '',
				innterIndexUnits2: '',
				checkboxList: [{
					name: '自有工厂/源头厂商',
					id: '1',
				}, {
					name: '一级批发商/经销商/贸易商/代理商',
					id: '2',
				}, {
					name: '二级批发商/经销商/贸易商/代理商',
					id: '3',
				}, {
					name: '其他',
					id: '4',
				}],
				unitList: [{
					name: '袋',
					id: 1,
				}, {
					name: '箱',
					id: 2,
				}, {
					name: '瓶',
					id: 3,
				}, {
					name: '桶',
					id: 4,
				}, {
					name: '件',
					id: 5,
				}, {
					name: '盒',
					id: 6,
				}, {
					name: '包',
					id: 7,
				}, {
					name: '个',
					id: 8,
				}, {
					name: '筐',
					id: 9,
				}, {
					name: '罐',
					id: 10,
				}, {
					name: '组',
					id: 11,
				}, {
					name: '捆',
					id: 12,
				}, {
					name: '把',
					id: 13,
				}, {
					name: '只',
					id: 14,
				}, {
					name: '提',
					id: 15,
				}, {
					name: '条',
					id: 16,
				}, {
					name: '托',
					id: 17,
				}, {
					name: '支',
					id: 18,
				}, {
					name: '块',
					id: 19,
				}, {
					name: '卷',
					id: 20,
				}, {
					name: '片',
					id: 21,
				}, {
					name: '杯',
					id: 22,
				}, {
					name: '套',
					id: 23,
				}, {
					name: '朵',
					id: 24,
				}, {
					name: '张',
					id: 25,
				}, {
					name: '棒',
					id: 26,
				}, {
					name: '板',
					id: 27,
				}, {
					name: '碗',
					id: 28,
				}, {
					name: '根',
					id: 29,
				}, {
					name: '盘',
					id: 30,
				}, {
					name: '听',
					id: 31,
				}, {
					name: '串',
					id: 32,
				}, {
					name: '双',
					id: 33,
				}, {
					name: '排',
					id: 34,
				}, {
					name: 'm',
					id: 35,
				}, {
					name: 'cm',
					id: 36,
				}, {
					name: 'mm',
					id: 37,
				}, {
					name: '尺',
					id: 38,
				}, {
					name: '寸',
					id: 39,
				}, {
					name: '枚',
					id: 40,
				}, {
					name: '壶',
					id: 41,
				}, {
					name: '棵',
					id: 42,
				}, {
					name: '盆',
					id: 43,
				}, {
					name: '本',
					id: 44,
				}],
				attrValue: [], //单位所选值
				attrValue2: [], //新增加单位所选的值
				radiovalue: [], //单选框的value绑定
				model1: {
					userInfo: {
						name: '',
					},
					intro: '',
					code: ''
				},
				modifiedArray: [], //添加过来的品类
				addCheckboxValue: [], //弹出层级，所选的值

				deleteManageCategoryData: [], //原有的删除的数据集合
				queryAuditData: {
					data: []
				}, //待审核信息
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getBrand();
			setTimeout(() => {
				this.getList();
			}, 1000)
			// ------
			this.otherBrand(); //接收原类目品牌名的改变
			this.otherAddBrand(); //接收新品牌名的
			this.businessQueryAudit(); //待审核信息
		},
		onShow() {
			if (this.needRefresh) {
				this.getList();
			}
		},
		created() {
			uni.$on('shopMessageoTherFun', this.otherFun);
		},
		destroyed() {
			uni.$off('shopMessageoTherFun', this.otherFun);
		},
		methods: {
			// 滚动事件
			scrollHandle() {
				if (this.moreStatus == 'more') {
					this.tableForm.page++
					this.getList()
				}
			},
			// 待审核信息
			businessQueryAudit(status) {
				if (status) {
					this.queryAuditData.data = []
				} else {
					businessQueryAuditApi().then((res) => {
						this.queryAuditData.data = res.data;
					})
				}

			},
			//获取品牌id
			getBrand() {
				brandlistApi(this.brandForm).then((res) => {
					this.brandData = res.data.records.map(({
						id,
						name
					}) => ({
						id,
						name
					}));
				});
			},
			//获取已添加的品类信息
			getList() {
				selectManageInfoApi(this.tableForm).then((res) => {
					this.oldTableData = JSON.parse(JSON.stringify(res.data.records))
					this.tableData = JSON.parse(JSON.stringify(res.data.records))
					if (res.code == 200) {
						let items = res.data.records
						if (items.length > 0) {
							if (items.length < this.tableForm.limit) {
								this.moreStatus = 'noMore'
							} else {
								this.moreStatus = 'more'
							}
						} else {
							this.moreStatus = 'noMore'
						}
					}

					let supplyTier = [];
					for (let text of this.tableData) {
						supplyTier.push(text.supplyTier);
					}; // 拿供应层级的对应id
					for (let i = 0; i < this.checkboxList.length; i++) {
						for (let j = 0; j < supplyTier.length; j++) {
							if (this.checkboxList[i].id == supplyTier[j]) {
								this.radiovalue[j] = this.checkboxList[i].name
							}
						}
					} // 供应层级的数据回显
					let brandId = [];
					for (let text of this.tableData) {
						brandId.push(text.brandId);
					}; // 拿供应层级的对应id
					for (let i = 0; i < this.brandData.length; i++) {
						for (let j = 0; j < brandId.length; j++) {
							if (this.brandData[i].id == brandId[j]) {
								this.brandValue[j] = this.brandData[i].name
							}else{
								this.brandValue[j] = '无品牌'
							}
						}
					} // 品牌的数据名称回显
					for (let i = 0; i < this.tableData.length; i++) {
						this.attrValue[i] = this.tableData[i].units
					} //单位的回显
				})
			},
			//供应层级选择框
			openGroup(item, index) {
				this.innterIndex = index;
				this.showGroup = true;
			},
			//新增的供应层级选择框
			addGroup(index1) {
				this.innterIndex2 = index1;
				this.showGroup2 = true;
			},
			// 关闭弹窗
			close() {
				this.showGroup = false;
				this.showGroup2 = false;
				this.showKeyBoard = false;
				this.showGroupUnit = false;
				this.showGroupUnit2 = false;
			},
			//原数据的供应层级，单选框弹窗
			groupChange(n) {
				let radioValue = n.detail.value;
				this.radiovalue[this.innterIndex] = radioValue;
				// 获取后，取出相应id
				let newArr = [];
				for (let i = 0; i < this.checkboxList.length; i++) {
					for (let j = 0; j < this.radiovalue.length; j++) {
						if (this.checkboxList[i].name == this.radiovalue[j]) {
							newArr[j] = this.checkboxList[i].id
						}
					}
				} // 供应层级的id值，获取
				let numberSupplyTier = newArr.map(str => Number(str)) //转为数值型数组
				for (let i = 0; i < Math.min(this.tableData.length, numberSupplyTier.length); i++) {
					this.tableData[i].supplyTier = numberSupplyTier[i];
				} //给对象数组，将数组的字符串，添加给新属性
			},
			//打开单位选择弹窗
			openGroupUnits(item, index) {
				this.innterIndexUnits = index; //索引
				this.showGroupUnit = true;
			},

			//原数据单位的 改变
			tapAttr(skuItem) {
				this.attrValue.splice(this.innterIndexUnits, 0, skuItem.name); //替换数据，并监听
				for (let i = 0; i < Math.min(this.tableData.length, this.attrValue.length); i++) {
					this.tableData[i].units = this.attrValue[i];
				} //给对象数组，将数组的字符串，添加给新属性
			},

			//新增加地单位的弹窗
			openGroupUnits2(item, index) {
				this.innterIndexUnits2 = index; //索引
				this.showGroupUnit2 = true;
			},

			//新增加地单位的 改变
			tapAttr2(skuItem) {
				this.$set(this.attrValue2, this.innterIndexUnits2, skuItem.name);
				for (let i = 0; i < Math.min(this.modifiedArray.length, this.attrValue2.length); i++) {
					this.modifiedArray[i].units = this.attrValue2[i];
				} //给对象数组，将数组的字符串，添加给新属性
			},
			//新增的弹出供应层级单选框
			addgroupChange(n) {
				let addRadioValue = n.detail.value;
				this.addCheckboxValue[this.innterIndex2] = addRadioValue;
				// 获取后，取出相应id
				let newArr = [];
				for (let i = 0; i < this.checkboxList.length; i++) {
					for (let j = 0; j < this.addCheckboxValue.length; j++) {
						if (this.checkboxList[i].name == this.addCheckboxValue[j]) {
							newArr[j] = this.checkboxList[i].id
						}
					}
				} // 供应层级的id值，获取
				let numberSupplyTier = newArr.map(str => Number(str)) //转为数值型数组
				for (let i = 0; i < Math.min(this.modifiedArray.length, numberSupplyTier.length); i++) {
					this.modifiedArray[i].supplyTier = numberSupplyTier[i];
				} //给对象数组，将数组的字符串，添加给新属性
			},

			// 去选择分类
			goSortePage(item) {
				// console.log(item)
				this.goPage(`/pages/categoryTable/components/classSortePage?id=${item}`);
			},
			//去品牌页面
			goBrand(index, ele) {
				const item = {
					index: index,
					ele: ele,
				}
				this.goPage('/pages/categoryTable/categoryBrand/categoryBrand?data=' + JSON.stringify(item));
			},
			//查看待审核信息
			goQueryAudit() {
				this.goPage('/pages/categoryTable/queryAudit/queryAudit?data=' + JSON.stringify(this.queryAuditData))
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			// 页面传值
			otherFun(list) {
				if (list) {
					this.modifiedArray.push(...list);
					this.modifiedArray = this.modifiedArray.map(item => {
						return {
							...item,
							brandId: '',
							businessSign: '1',
						};
					}); //数组对象添加属性名
				}
			},
			// 传回tableData的品牌名
			otherBrand(list) {
				if (list) {
					this.tableData[list.index].brandId = list.brandId;
					this.$set(this.brandValue, list.index, list.brandName);
				}
			},
			// 传回新加入的品牌名
			otherAddBrand(list) {
				if (list) {
					this.modifiedArray[list.index].brandId = list.brandId;
					this.$set(this.brandValue2, list.index, list.brandName);
				}
			},
			//删除
			deleteCata(item, ele) {
				this.tableData.splice(ele, 1);
				this.radiovalue.splice(ele, 1); //相应供应层级删除
				this.attrValue.splice(ele, 1);
				this.brandValue.splice(ele, 1);
				this.deleteManageCategoryData.push(item);
				this.deleteManageCategoryData = this.deleteManageCategoryData.map(item => {
					return {
						...item,
						businessSign: '3'
					};
				}); //删除的数据集合
			},
			//前端页面删除新加
			delateDate(ele) {
				this.modifiedArray.splice(ele, 1) //使用splice 方法删除当前对象
				this.addCheckboxValue.splice(ele, 1) //相应供应层级删除
				this.attrValue2.splice(ele, 1)
				this.brandValue2.splice(ele, 1)
			},
			//提交审核按钮
			addManageCategory() {
				const addManageData = this.modifiedArray.map(obj => {
					const {
						checked,
						...rest
					} = obj;
					//删除部分属性
					return rest
				});
				addManageData.forEach(item => {
					item.sonId = item.id; //修改属性名
					item.parentId = item.pid,
					delete item.id;
					delete item.pid;
				}); //添加的数据

				const deleteManageData = this.deleteManageCategoryData.map(obj => {
					const {
						merId,
						...rest
					} = obj; //删除部分属性
					return rest
				}); //要删除的数据的数组

				let changedObjects = [];
				for (let i = 0; i < this.oldTableData.length; i++) {
					let originalObj = this.oldTableData[i];
					let newObj = this.tableData.find(obj => obj.id === originalObj.id);

					if (!newObj || JSON.stringify(newObj) !== JSON.stringify(originalObj)) {
						changedObjects.push(newObj);
					}
				}; //对比修改的对象，并取出
				const newChangedObjectsData = changedObjects.map(item => {
					return {
						...item,
						businessSign: '2'
					};
				}); //修改的数据集合

				let newChangedObjects = newChangedObjectsData.concat(addManageData, deleteManageData) //合并
				const filteredArr = newChangedObjects.filter(obj => obj.parentId !== undefined);
				const exists = filteredArr.some(item => item.hasOwnProperty('supplyTier')); //验证选择层级是否选择
				
				console.log('filteredArr:',filteredArr)
				if (exists) {
					manageCategoryAuditApi(filteredArr).then((res) => {});
					this.$router.go(0);
				} else {
					this.$util.Tips({
						title: '请选择供应层级'
					})
				}


			},
		},
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	page {
		height: 100%;
	}

	.middle {
		margin: 20px 10px;
		font-weight: 500;
	}

	.card {
		margin: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 10px;
	}

	.u-demo-block {
		height: 50vh;
		padding: 20px;
	}

	.u-demo-block2 {
		height: 70vh;
		padding: 20px;
	}

	.u-demo-block__title {
		font-size: 16px;
		font-weight: bold;
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}

	.item-expanded {
		flex-grow: 2 !important;
	}

	.sku-select1 {
		.flex-text {
			margin: 8rpx 8rpx;
			background-color: #f7f7f7;
			line-height: 62rpx;
			text-align: center;
			color: #777;
			padding: 16rpx 34rpx;
			font-size: 26rpx;
			font-weight: bolder;
			border-radius: 10rpx;
			border: 1rpx solid #FFF;
		}

		.right-class-active {
			@include main_color(theme);
			@include main_bg_rgba_color(theme, 0.05);
			border: 1rpx solid;
		}
	}
	
	.noCommodity {
		margin-top: 30%;
		align-items: center;
		text-align: center;
		justify-content: center;
	}
</style>